// import axios from 'axios'

// 仅仅是为了优化
// import a from 'a-plugin'
// // 日历插件
// import a from 'a-plugin'
// import a from 'a-plugin'

export default {
  data () {
    return {
      // 表格数据
      usersData: [
        {
          username: '傻春',
          email: 'shachun@qq.com',
          mobile: '1233211234567'
        }
      ],
      // total 总个数
      total: 0,
      // 当前页
      pagenum: 1,
      // 搜索文本
      searchText: '',
      // 是否显示添加用户对话框
      dialogAddUserVisible: false,
      // 添加用户表单对象
      addUserForm: {
        username: '',
        password: '',
        email: '',
        mobile: ''
      },
      // 校验规则 :
      rules: {
        // 校验username
        username: [
          // 判断是否输入
          { required: true, message: '请输入用户名', trigger: 'blur' },
          // 判断格式是否正确
          { min: 3, max: 5, message: '长度在3-5之间', trigger: 'blur' }
        ],
        // 校验password
        password: [
          // 判断是否输入
          { required: true, message: '请输入密码', trigger: 'blur' },
          // 判断格式是否正确
          { min: 5, max: 10, message: '长度在5-10之间', trigger: 'blur' }
        ],
        // 校验 邮箱
        email: [
          // 判断格式是否正确
          {
            pattern: /^[A-Za-z\d]+([-_.][A-Za-z\d]+)*@([A-Za-z\d]+[-.])+[A-Za-z\d]{2,4}$/,
            message: '格式不正确',
            trigger: 'blur'
          }
        ],
        // 校验 手机
        mobile: [
          // 判断格式是否正确
          {
            pattern: /^(13[0-9]|14[579]|15[0-3,5-9]|16[6]|17[0135678]|18[0-9]|19[89])\d{8}$/,
            message: '格式不正确',
            trigger: 'blur'
          }
        ]
      },
      // 是否显示编辑用户对话框
      dialogEditUserVisible: false,
      // 编辑用户表单对象
      editUserForm: {
        username: 'chun',
        emial: '',
        mobile: '',
        id: 0
      },
      // 是否显示分配角色对话框
      dialogAssignRoleVisible: false,
      // 分配角色表单对象
      assignRoleForm: {
        // 用户名
        username: 'chun',
        // 用户id
        id: '',
        // 角色id
        rid: ''
      },
      // 角色数据
      rolesData: []
    }
  },
  created () {
    this.loadUsersData()
    // 获取所有的角色信息
    this.loadRolesData()
  },
  methods: {
    // 获取用户数据
    async loadUsersData (pagenum = 1, query = '') {
      // 格式 axios.get(url,config(params 和 headers))
      const url = 'users'
      const config = {
        params: {
          query,
          pagenum,
          pagesize: 2
        }
        // headers: {
        //   Authorization: localStorage.getItem('token')
        // }
      }
      let res = await this.$axios.get(url, config)
      console.log(res)
      // 把表格数据保存起来
      this.usersData = res.data.data.users
      // 把总个数保存起来
      this.total = res.data.data.total
      // 把当前页保存起来
      this.pagenum = res.data.data.pagenum

      // axios
      //   .get('http://localhost:8888/api/private/v1/users', {
      //     params: {
      //       query,
      //       pagenum,
      //       pagesize: 2
      //     },
      //     headers: {
      //       Authorization: localStorage.getItem('token')
      //     }
      //   })
      //   .then(res => {
      //     console.log(res)
      // // 把表格数据保存起来
      // this.usersData = res.data.data.users
      // // 把总个数保存起来
      // this.total = res.data.data.total
      // // 把当前页保存起来
      // this.pagenum = res.data.data.pagenum
      //   })
    },
    // 改变页数 = 点击分页
    // 参数 : 就是点击的当前页
    changeCurPage (curPage) {
      console.log('点击了分页:', curPage)
      this.loadUsersData(curPage, this.searchText)
    },
    // 开始查询
    startQuery () {
      // console.log(this.searchText);
      // searchText : t
      // 获取 t 的第一页数据
      this.loadUsersData(1, this.searchText)
    },
    // 显示添加用户对话框
    showAddUserDialog () {
      this.dialogAddUserVisible = true
    },
    // 添加用户
    addUser () {
      // 格式 :  axios.post(url,data,config)
      // config : {}   params headers
      // this.$axios
      // .post('users', this.addUserForm, {
      //   headers: {
      //     Authorization: localStorage.getItem('token')
      //   }
      // })
      this.$axios.post('users', this.addUserForm).then(res => {
        console.log(res)
        if (res.data.meta.status === 201) {
          // 1. 隐藏对话框
          this.dialogAddUserVisible = false
          // 2. 提示
          this.$message({
            message: '添加用户成功',
            type: 'success',
            duration: 800
          })
          // 3. 刷新一下
          this.loadUsersData()
        }
      })
    },
    // 删除用户
    async delUser (row) {
      // console.log('row:', row)

      // 1. 获取当前行对象里的id
      const { id } = row

      try {
        await this.$confirm('此操作将永久删除该用户, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })

        // 格式  axios.delete(url,config)   delete和get是一样的额   post和put/pacth (url,data,config)
        // let res = await this.$axios.delete(`users/${id}`, {
        //   headers: {
        //     Authorization: localStorage.getItem('token')
        //   }
        // })
        let res = await this.$axios.delete(`users/${id}`)
        console.log(res)
        if (res.data.meta.status === 200) {
          // 1. 提示
          this.$message({
            message: '删除用户成功',
            type: 'success',
            duration: 800
          })

          // 2. 刷新一下
          this.loadUsersData()
        }
      } catch (error) {
        // console.log('点击了取消')
        this.$message({
          message: '取消删除',
          type: 'info',
          duration: 800
        })
      }
    },
    // 状态修改
    async stateChanged (row) {
      // 1. 获取row 里的数据
      const { id, mg_state } = row

      // 2. 发送请求
      // axios.put(url,data,config)
      // let res = await this.$axios.put(`users/${id}/state/${mg_state}`, null, {
      //   headers: {
      //     Authorization: localStorage.getItem('token')
      //   }
      // })
      let res = await this.$axios.put(`users/${id}/state/${mg_state}`)
      // 3. 判断处理
      if (res.data.meta.status === 200) {
        // 3.1 提示
        this.$message({
          message: '更改状态成功',
          type: 'success',
          duration: 800
        })
        // 3.2 刷新一下页面
        this.loadUsersData(this.pagenum)
      }
    },
    // 显示 编辑用户对话框
    showEditUserDialog (row) {
      // 1. 显示
      this.dialogEditUserVisible = true

      // 2. 获取数据
      const { username, email, mobile, id } = row
      // 3. 把这三个数据,赋值给 editUserForm
      this.editUserForm.username = username
      this.editUserForm.email = email
      this.editUserForm.mobile = mobile
      this.editUserForm.id = id
    },
    // 编辑用户
    async editUser () {
      // 1. 获取已知参数
      const { email, mobile, id } = this.editUserForm

      // 2. 请求
      let res = await this.$axios.put(`users/${id}`, {
        email,
        mobile
      })

      // 3. 判断是否成功
      if (res.data.meta.status === 200) {
        // 3.1  隐藏对话框
        this.dialogEditUserVisible = false
        // 3.2 提示
        this.$message({
          message: '编辑用户成功',
          type: 'success',
          duration: 800
        })
        // 3.3 刷新
        this.loadUsersData(this.pagenum)
      }
    },
    // 监听对话框关闭
    dialogClosed () {
      console.log('对话框关闭了')
      // 表单重置
      this.$refs.addUserForm.resetFields()
    },
    // 获取所有的角色信息
    async loadRolesData () {
      let res = await this.$axios.get('roles')
      console.log(res)
      this.rolesData = res.data.data
    },
    // 展示分配角色对话框
    async showAssignRoleDialog (row) {
      this.dialogAssignRoleVisible = true

      // row 是当前行的对象 => 用户的对象信息
      // 需要 username id rid
      // 1. 读取需要的信息数据
      const { username, id } = row
      // 2. 赋值
      this.assignRoleForm.username = username
      this.assignRoleForm.id = id

      // 角色rid 没有??
      // 3. 可以根据id 再次发送请求获取rid
      let res = await this.$axios.get(`users/${id}`)
      this.assignRoleForm.rid = res.data.data.rid == -1 ? '' : res.data.data.rid
    },
    // 分配角色
    async assignRole () {
      // 1. 获取 id 和 rid
      const { id, rid } = this.assignRoleForm

      let res = await this.$axios.put(`users/${id}/role`, {
        rid
      })

      // console.log(res)
      if (res.data.meta.status === 200) {
        // 1. 关闭对话框
        this.dialogAssignRoleVisible = false
        // 2. 提示
        this.$message({
          message: '分配角色成功',
          type: 'success',
          duration: 800
        })
        // 3. 刷新
        this.loadUsersData(this.pagenum)
      }
    }
  }
}
